<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        #diagramContainer {
          padding: 20px;
          width: 80%;
          height: 400px;
          border: 1px solid gray;
        }
    
        .item {
          position: absolute;
          height: 80px;
          width: 80px;
          border: 1px solid blue;
        }
      </style>
    </head>
    
    <body>
      <!-- <div id="diagramContainer"> -->
        <div id="item_left" class="item"></div>
        <div id="item_right" class="item" style="left:150px;"></div>
        <div id="item_right0" class="item" style="left:300px;"></div>
      <!-- </div> -->
      <script src="../../node_modules/jsplumb/dist/js/jsplumb.min.js"></script>
    
      <script>
        /* global jsPlumb */
        jsPlumb.ready(function () {
          jsPlumb.connect({
            source: 'item_left',
            target: 'item_right',
            endpoint: 'Dot',
            connector: ['Flowchart'],
            anchor: ['Left', 'Right']
          })
    
          jsPlumb.connect({
            source: 'item_right',
            target: 'item_right0',
            endpoint: 'Dot',
            connector: ['Flowchart'],
            anchor: ['Left', 'Right']
          })

          jsPlumb.draggable('item_left')
          jsPlumb.draggable('item_right')
          jsPlumb.draggable('item_right0')
        })
      </script>
    </body>
    
    </html>
    